<template>
  <div class="app-container">
    <el-card>
      <h3>Most Commonly Asked Questions</h3>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-question" style="font-size: 20px;color: #4A9FF9" />
            <p style="margin-left: 1rem;font-size: 17px;font-weight: bold">编译器</p>
          </template>
          <div style="font-size: 16px">
            <p>GOJ是一个在线测评系统，运行于
              <el-link style="font-size: 16px;color: #20a0ff" href="http://releases.ubuntu.com/18.04/" target="_blank">Ubuntu18.04</el-link>
              ，使用
              <el-link style="font-size: 16px;color: #20a0ff" href="https://gcc.gnu.org/" target="_blank">GUN GCC/G++</el-link>
              作为C/C++编译器，
              <el-link style="font-size: 16px;color: #20a0ff" href="http://openjdk.java.net/projects/jdk/11/" target="_blank">Openjdk</el-link>
              作为Java编译器，使用
              <el-link style="font-size: 16px;color: #20a0ff" href="https://www.python.org/downloads/" target="_blank">Python</el-link>
              程序解释Python代码</p>
            <p style="font-weight: bold">编译器版本暂时为：</p>
            <p style="color: #20a0ff">gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)</p>
            <p style="color: #20a0ff">OpenJDK Runtime Environment (build 11.0.10+9-Ubuntu-0ubuntu1.18.04)</p>
            <p style="color: #20a0ff">Python 3.6.9</p>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-question" style="font-size: 20px;color: #4A9FF9" />
            <p style="margin-left: 1rem;font-size: 17px;font-weight: bold">标准样例</p>
          </template>
          <p style="font-size: 17px;font-weight: bold">你的程序应该使用标准输入输出</p>
          <p style="font-size: 18px;">下面是
            <el-link href="/#/editor?problemId=1000" style="color: #0a89e7">A+B</el-link>
            的参考答案
          </p>
          <p style="font-size: 18px;font-weight: bold">C:</p>
          <el-input :value="cCode" type="textarea" readonly :autosize="{ minRows: 4, maxRows: 18}" />
          <p style="font-size: 18px;font-weight: bold">C++:</p>
          <el-input :value="cppCode" type="textarea" readonly :autosize="{ minRows: 4, maxRows: 18}" />
          <p style="font-size: 18px;font-weight: bold">Java:</p>
          <el-input :value="javaCode" type="textarea" readonly :autosize="{ minRows: 4, maxRows: 18}" />
          <p style="font-size: 18px;font-weight: bold">Python:</p>
          <el-input :value="pythonCode" type="textarea" readonly :autosize="{ minRows: 4, maxRows: 18}" />
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <i class="header-icon el-icon-question" style="font-size: 20px;color: #4A9FF9" />
            <p style="margin-left: 1rem;font-size: 17px;font-weight: bold">编译结果</p>
          </template>
          <p v-for="item in resultMap" :key="item.num" style="font-size: 16px">
            <span :style="{color:item.color}">{{ item.result }}</span>
            <span>：{{ item.explain }}</span>
          </p>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import { resultMap } from '@/utils/global'
export default {
  data() {
    return {
      resultMap: resultMap,
      activeName: '1',
      cCode: '#include <stdio.h>\n' +
        'int main(){\n' +
        '    int a,b;\n' +
        '    while(scanf("%d %d",&a, &b) != EOF)\n' +
        '        printf("%d\\n",a+b);\n' +
        '    return 0;\n' +
        '}',
      cppCode: '#include <iostream>\n' +
        'using namespace std;\n' +
        'int main(){\n' +
        '    int a,b;\n' +
        '    while(cin >> a >> b)\n' +
        '        cout << a+b << endl;\n' +
        '    return 0;\n' +
        '}',
      javaCode: 'import java.util.*;\n' +
        'public class Main{\n' +
        '\tpublic static void main(String args[]){\n' +
        '\t\tScanner cin = new Scanner(System.in);\n' +
        '\t\tint a, b;\n' +
        '\t\twhile (cin.hasNext()){\n' +
        '\t\t\ta = cin.nextInt(); b = cin.nextInt();\n' +
        '\t\t\tSystem.out.println(a + b);\n' +
        '\t\t}\n' +
        '\t}\n' +
        '}',
      pythonCode: 'import io\n' +
        'import sys\n' +
        'sys.stdout = io.TextIOWrapper(sys.stdout.buffer,encoding=\'utf8\')\n' +
        'for line in sys.stdin:\n' +
        '    a = line.split()\n' +
        '    print(int(a[0]) + int(a[1]))'
    }
  }

}
</script>

<style scoped>
::v-deep .el-textarea__inner{
  background-color: #34495e;
  color: #ecf0f1;
}
</style>
